<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%
String path = request.getContextPath();
String basePath0 = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+"/";
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head lang="en">
		<meta charset="utf-8" />
		<title>购物车</title>
		<link rel="stylesheet" type="text/css" href="<%=basePath%>frontPage/css/public.css"/>
		<link rel="stylesheet" type="text/css" href="<%=basePath%>frontPage/css/proList.css" />		
	    <script src="<%=basePath%>frontPage/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="<%=basePath%>frontPage/js/public.js" type="text/javascript" charset="utf-8"></script>
		<script src="<%=basePath%>frontPage/js/pro.js" type="text/javascript" charset="utf-8"></script>
		<script src="<%=basePath%>frontPage/js/cart.js" type="text/javascript" charset="utf-8"></script>
	    <script type="text/javascript">
	    	function delCart(farm){
	    		if(confirm("确定要删除该商品吗？")){
	    			$.ajax({
	    				url:"<%=basePath%>delCartById/"+farm,
						type:"post",
						dataType:"text",
						success:function(data){	
							//刷新页面重新加载
							window.location.reload();
						},
						error:function(){
							
						}
	    			})
	    		}
	    	}
	    	
	    	//批量删除
	    	function delCartsByIds(){
	    		//根据选中状态获取选中购物车的id；
	    		var ids = getCheckedValue();
	    		var strIds = ids.join(",");
	    		if(confirm("确定要删除该商品吗？")){
	    			$.ajax({
	    				url:"<%=basePath%>delCartById/"+strIds,
						type:"post",
						dataType:"text",
						success:function(data){	
							//刷新页面重新加载
							window.location.reload();
						},
						error:function(){
							
						}
	    			})
	    		}
	    	}
	    	
	    	//结算并提交数据到支付页面
	    	function settlement(farm){
	    		//获取被选中商品得id
	    		var ids = getCheckedValue();
	    		var strIds = ids.join(",");
	    		if(strIds == null || strIds == ""){
	    			alert("请勾选商品再结算！");
	    			return;
	    		}
	    		window.location.href = "<%=basePath%>toCheckoutPage/"+farm+"/"+strIds;
	    		
	    	}
	    	
	    	
	    	//获取复选框中多个被选中的id
	    	function getCheckedValue(){
	    		var ids=[];
	    		$("input[type='checkbox']").each(function(){
	    			if(this.checked){
	    				ids.push($(this).val());
	    			}
	    		})
	    		//
	    		return ids;
	    	}
	    </script>
	</head>
	<body>
		<!--------------------------------------cart--------------------->
		<jsp:include page="header1.jsp"></jsp:include>
		<div class="cart mt">			
			<!-----------------site------------------->
			<div class="site">
				<p class=" wrapper clearfix">
					<span class="fl">购物车</span>
					<img class="top" src="<%=basePath%>frontPage/img/temp/cartTop01.png">
					<a href="<%=basePath%>frontPage/productListMh" class="fr">继续购物&gt;</a>
				</p>
			</div>
			<!-----------------table------------------->
			<div class="table wrapper">
				<div class="tr">
					<div>商品</div>
					<div>单价</div>
					<div>数量</div>
					<div>小计</div>
					<div>操作</div>
				</div>
				<c:forEach items="${cartsByUserId }" var="cart">
					<div class="th">				
						<div class="pro clearfix">
							<label class="fl">
								<input type="checkbox" value="${cart.id}"/>
	    						<span></span>
							</label>
							<a class="fl" href="#">
								<dl class="clearfix">
									<dt class="fl"><img src="<%=basePath%>/${cart.img}" style="width: 100px;height: 100px;"></dt>
									<dd class="fl">
										<p>${cart.name }</p>
										<p>尺寸:</p>
										<p>${cart.size }</p>
									</dd>
								</dl>
							</a>
						</div>
						<div class="price">￥${cart.price }</div>
						<div class="number">
							<p class="num clearfix">
								<img class="fl sub" src="<%=basePath%>frontPage/img/temp/sub.jpg">
								<span class="fl">${cart.count}</span>
								<input type="hidden" value="${cart.id}"> 
								<input type="hidden" value="${cart.price}"> 
								<img class="fl add" src="<%=basePath%>frontPage/img/temp/add.jpg">
							</p>
						</div>
						<div class="price sAll">￥${cart.totalSum }</div>
						<div class="price"><a class="del" onclick="delCart(${cart.id})">删除</a></div>
					</div>
				</c:forEach>
								
				<div class="goOn">空空如也~<a href="index.html">去逛逛</a></div>
				<div class="tr clearfix">
					<label class="fl">
						<input class="checkAll" type="checkbox"/>
						<span></span>
					</label>
					<p class="fl">
						<a href="#">全选</a>
						<a href="#" class="del" onclick="delCartsByIds()">删除</a>
					</p>
					<p class="fr">
						<span>共<small id="sl">0</small>件商品</span>
						<span>合计:&nbsp;<small id="all">￥0.00</small></span>
						<a href="#" class="count" onclick="settlement(${userId})">结算</a>
					</p>
				</div>
			</div>
		</div>
		<div class="mask"></div>
		<div class="tipDel">
			<p>确定要删除该商品吗？</p>
			<p class="clearfix">
				<a class="fl cer" href="#">确定</a>
				<a class="fr cancel" href="#">取消</a>
			</p>
		</div>
		
		<!--footer-->
		<jsp:include page="footer.jsp"/>
		<!----------------mask------------------->
		<div class="mask"></div>
		<!-------------------mask内容------------------->
		<div class="proDets">
			<img class="off" src="<%=basePath%>frontPage/img/temp/off.jpg" />
			<div class="proCon clearfix">
				<div class="proImg fr">
					<img class="list" src="<%=basePath%>frontPage/img/temp/proDet.jpg"  />
					<div class="smallImg clearfix">
						<img src="<%=basePath%>frontPage/img/temp/proDet01.jpg" data-src="img/temp/proDet01_big.jpg">
						<img src="<%=basePath%>frontPage/img/temp/proDet02.jpg" data-src="img/temp/proDet02_big.jpg">
						<img src="<%=basePath%>frontPage/img/temp/proDet03.jpg" data-src="img/temp/proDet03_big.jpg">
						<img src="<%=basePath%>frontPage/img/temp/proDet04.jpg" data-src="img/temp/proDet04_big.jpg">
					</div>
				</div>
				<div class="fl">
					<div class="proIntro change">
						<p>颜色分类</p>
						<div class="smallImg clearfix">
							<p class="fl on"><img src="<%=basePath%>frontPage/img/temp/prosmall01.jpg" alt="白瓷花瓶+20支快乐花" data-src="img/temp/proBig01.jpg"></p>
							<p class="fl"><img src="<%=basePath%>frontPage/img/temp/prosmall02.jpg" alt="白瓷花瓶+20支兔尾巴草" data-src="img/temp/proBig02.jpg"></p>
							<p class="fl"><img src="<%=basePath%>frontPage/img/temp/prosmall03.jpg" alt="20支快乐花" data-src="img/temp/proBig03.jpg"></p>
							<p class="fl"><img src="<%=basePath%>frontPage/img/temp/prosmall04.jpg" alt="20支兔尾巴草" data-src="img/temp/proBig04.jpg"></p>
						</div>
					</div>
					<div class="changeBtn clearfix">
						<a href="#2" class="fl"><p class="buy">确认</p></a>
						<a href="#2" class="fr"><p class="cart">取消</p></a>
					</div>
				</div>
			</div>
		</div>
		<div class="pleaseC">
			<p>请选择宝贝</p>
			<img class="off" src="<%=basePath%>frontPage/img/temp/off.jpg" />
		</div>
		
	</body>
</html>
